import { fileURLToPath, URL } from 'node:url'
import postCssPxToRem from 'postcss-pxtorem'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  server: {
    host: '0.0.0.0',
    open: true
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    postcss: {
      plugins: [
        // 使用插件 配置 属性
        postCssPxToRem({
          rootValue: 40, // 定义 rem 基准值 基础单位 设计图1/10
          // 定义哪些css 属性 单位 px自动转换成rem  或者使用 PX 则不转换成rem
          propList: ['font', 'font-size', 'line-height', 'letter-spacing', 'width', 'height'], // ['*']所有css属性单位都转换成rem
          exclude: /node_modules/i // 哪些文件中css 单位 不转换
        })
      ]
    }
  }
})
